<template>
  <view class="">
    <u-form :model="form" ref="formRef">
      <u-form-item label="姓名" prop="name">
        <u-input v-model="form.name" />
      </u-form-item>
      <u-form-item label="简介" prop="intro">
        <u-input v-model="form.intro" /> 
      </u-form-item>
    </u-form>
    <u-button @click="submit">提交</u-button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 表单数据
const form = ref({
  name: '',
  intro: '',
})

// 验证规则
const rules = ref({
  name: [
    { 
      required: true, 
      message: '请输入姓名', 
      trigger: ['change','blur'],
    }
  ],
  intro: [
    {
      min: 5, 
      message: '简介不能少于5个字', 
      trigger: 'change'
    }
  ]
})

// 表单引用
const formRef = ref(null)

// 提交方法
const submit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      console.log('验证通过')
    } else {
      console.log('验证失败')
    }
  })
}

// 组件挂载后设置验证规则
onMounted(() => {
  formRef.value.setRules(rules.value)
})
</script>